@charset "utf-8";
@import "reset";
@mixin fiex-between {
    display: flex ;
    justify-content: space-between ;   
}
@mixin mediate {
    left: 50%;
    transform: translateX(-50%);  
}


header{
        width: 1280px;
        margin: 0 auto;
    .head-title{
        height: 38px;
        
        .title{
            padding: 0px 160px;
            background-color:#dadfe7 ;
            ul{
                line-height:38px ;
                font-size: 14px;
                @include fiex-between;
                li:nth-child(2){
                width: 140px;
                @include fiex-between;
                }
            }
        }
    }

    .nav-contant{
        width: 1280px;
        padding: 0px 155px 0px 165px ;
        margin: 0 auto;
        .div-img{
            padding: 20px 0 0 0 ;
        }
        .company-name{
            padding: 34px 0px 0px 20px;
            .top{
                font-size: 25px;
                line-height: 28px;
                font-weight: bold;
            }
            .bottom{
                font-size: 14px;
                line-height: 14px;
                letter-spacing: -0.4px;
            }
        }
        ul{
            display: flex;
            li{
                cursor: pointer;
                width: 84px;
                padding: 30px 0px 30px 0px;
                position: relative;
                
                &::after{
                    content: "";
                    display: block;
                    position: absolute;
                    bottom:0px;
                    height: 3px;
                    left: 50%;
                    width: 0px;
                    background-color:#3c9cd3 ;
                    transform: translateX(-50%);
                    transition: all .3s;
                }
                &:hover a{
                    color:gray;
                   
                }
                &:hover{
                    background-color: #faf8f8;
                }
                &:hover::after{
                    width: 84px;
                    
                }
                a{
                    display: block;
                    line-height: 22px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: bold;
                }
            }
        }
    }
    
}

footer{
    width: 1280px;
    margin: 0 auto;
    .top{
        background-color: #3c9cd3;
        .log{
            text-align: center;
            line-height: 22px;
            padding: 20px 0px 24px 0px; 
            span{
                display: inline-block;
                font-size: 12px;
                color: white;
            }
            i{
                display: inline-block;
                font-size: 22px;
                padding-left: 23px;
                color: #48b9fa;
            }
        }
        .infor{
            color: white;
            width: 409px;
            margin: 0 auto;
            padding-bottom: 24px;
            ul{
                @include fiex-between;
               
                li{
                    font-size: 12px;
                   list-style: disc;
                   &:first-child{
                       list-style: none;
                   }
                }
            }
        }
    }
    .bottom{
        background-color: black;
       
        .contant{
            font-size: 12px;
            line-height: 35px;
            color: white;
            width: 490px;
            margin: 0 auto;
            letter-spacing: 1.25px;
        }
    }
}


